﻿<%@ Page Title="devinfo" Language="C#" MasterPageFile="~/EasyUI.master" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="jnagr.Web.devinfo.List" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6a5e0746feee514e8bb7b3f468a626d1">
    </script>
    <%--<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>--%>
    <script src="../Script/TextIconOverlay_min.js"></script>
    <script src="../Script/MarkerClusterer_min.js"></script>
    <script src="../Script/vardevtype.js"></script>
    <script type="text/javascript">
        
        var weathertype = [{ "id": "空气温度", "text": "空气温度" }, { "id": "空气湿度", "text": "空气湿度" }, { "id": "露点", "text": "露点" }, { "id": "风速", "text": "风速" }, { "id": "风向", "text": "风向" }, { "id": "雨量", "text": "雨量" }, { "id": "气压", "text": "气压" }, { "id": "蒸发", "text": "蒸发" }, { "id": "光照", "text": "光照" }, { "id": "土壤温度", "text": "土壤温度" }, { "id": "土壤湿度", "text": "土壤湿度" }, { "id": "光合有效", "text": "光合有效" }, { "id": "二氧化碳", "text": "二氧化碳" }, { "id": "直接辐射表", "text": "直接辐射表" }, { "id": "总辐射", "text": "总辐射" }, { "id": "紫外辐射(全波段)", "text": "紫外辐射(全波段)" }];
        var pt;
        var ptmark;
        var uid = "";
        var map;
        var sprovince = "";
        var scity = "";
        var scounty = "";
        var se; //镇
        var sebm;//镇的编码
        var icon1 = new BMap.Icon('../images/map1.gif', new BMap.Size(18, 34), { anchor: new BMap.Size(9, 34) });
        var icon2 = new BMap.Icon('../images/map2.gif', new BMap.Size(18, 34), { anchor: new BMap.Size(9, 34) });
        var icon3 = new BMap.Icon('../images/map3.gif', new BMap.Size(18, 34), { anchor: new BMap.Size(9, 34) });
        var icon4 = new BMap.Icon('../images/map4.gif', new BMap.Size(18, 34), { anchor: new BMap.Size(9, 34) });
        var ply;//区域线
        var loc;//选择点的地址
        var jd="";
        var wd = "";
        var markerClusterer;
        var markers = [];
        var data_info;
        var label;

        $.extend($.fn.tree.methods, {
            getLevel: function (jq, target) {
                var l = $(target).parentsUntil("ul.tree", "ul");
                return l.length + 1;
            }
        });
        $(function () {
            InitGird();
            InitSearch();
            InitTree();
            InitMap();
        });
        function InitTree() {
            $('#pt').tree({
                width: '100%', //宽度                
                lines: true,
                //data: provincetree,   
                url: '../areainfo/GetArea.ashx', //请求数据的页面 
                method: 'post',
                queryParams: { "action": "querymyareauser" },
                onBeforeExpand: function (node) {
                    $("#pt").tree("options").queryParams = { "action": "queryyb" };
                    $('#pt').tree('options').url = "../areainfo/GetArea.ashx?pid=" + node.id;
                },
                onClick: function (node) {
                    sprovince = scity = scounty = se = "";
                    if (node.text != "") {
                        var lv = $('#pt').tree("getLevel", node.target);
                        if (lv == 2) {
                            sprovince = node.text;
                        }
                        else if (lv == 3) {
                            scity = node.text;
                            sprovince = $('#pt').tree("getParent", node.target).text;
                        }
                        else if (lv == 4) {
                            scounty = node.text;
                            var node1 = $('#pt').tree("getParent", node.target)
                            scity = node1.text;
                            sprovince = $('#pt').tree("getParent", node1.target).text;
                        }
                        else if (lv == 5) {
                            
                            var node1 = $('#pt').tree("getParent", node.target);
                            scounty = node1.text;
                            var node2 = $('#pt').tree("getParent", node1.target);
                            scity = node2.text;
                            sprovince = $('#pt').tree("getParent", node2.target).text;
                            se = node.text;

                        }
                        sebm = node.bm;
                        map.clearOverlays();
                        getBoundary(sprovince + scity + scounty );
                        reloadgrid();
                    }
                    //    map.clearOverlays();
                    
                },
                onLoadSuccess: function (node, param) {
                    //reloadgrid();
                }
            });

        }
        function InitMap() {
            map = new BMap.Map("mymap");          // 创建地图实例 
            map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
            //map.setCurrentCity("济南");          // 设置地图显示的城市 此项是必须设置的
            if (scounty != "")
                map.centerAndZoom(county, 13);
            else if (scity != "")
                map.centerAndZoom(city, 11);
            else if (sprovince != "")
                map.centerAndZoom(pro, 9);
            else
                map.centerAndZoom("济南", 11);
            map.enableScrollWheelZoom(true);
            var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });// 左上角，添加比例尺
            var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
            map.addControl(top_left_control);
            map.addControl(top_left_navigation);
            var geoc = new BMap.Geocoder();
            map.addEventListener("click", function (e) {
                if (ptmark != null) {
                    //map.clearOverlays(ptmark);
                    ptmark.hide();
                    ptmark = "";
                }
                pt = e.point;
                jd = e.point.lng;
                wd = e.point.lat;
                geoc.getLocation(pt, function (rs) {
                    var addComp = rs.addressComponents;
                    loc = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                });
                ptmark = new BMap.Marker(pt)
                map.addOverlay(ptmark);
            });
        }        
        //初始化表格
        function InitGird() {
            $('#tt').datagrid({
                title: '设备列表', //表格标题
                url: 'GetDev.ashx', //请求数据的页面
                sortName: 'devname', //排序字段
                idField: 'KeyId', //标识字段,主键
                iconCls: '', //标题左边的图标
                width: '100%', //宽度
                //height: $(parent.document).find("#mainPanle").height() - 35 > 0 ? $(parent.document).find("#mainPanle").height() - 35 : 500, //高度
                nowrap: false, //是否换行，True 就会把数据显示在一行里
                striped: true, //True 奇偶行使用不同背景色
                collapsible: false, //可折叠
                singleSelect: true,
                sortOrder: 'desc', //排序类型
                remoteSort: true, //定义是否从服务器给数据排序
                fitColumns: true,
                method: 'post',
                columns: [[
                    { field: 'ckb', checkbox: true },
                    { title: '类型', field: 'DevType', width: 60 },
                    { title: '名称', field: 'devname', width: 150 }

                ]],
                toolbar: "#tab_toolbar",
                queryParams: { "action": "query" },
                onClickRow: function (rowIndex, rowData) {
                    map.centerAndZoom(new BMap.Point(rowData.mjd, rowData.mwd), 14);
                },
                onLoadSuccess: function (data) {
                    data_info = [];
                    //map.clearOverlays();
                    $.each(data.rows, function (k, v) {
                        data_info.push({ "lng": v["mjd"], "lat": v["mwd"], "mlevel": v["DevType"], "mname": v["devname"], "madd": v["DevLocation"], "mpic": v["mpic"] });
                    });
                    var mlevel;
                    var marker;
                    var ptt = "";
                    if (markers.length > 0) {
                        if (markerClusterer != null) {
                            markerClusterer.removeMarkers(markers);
                            markerClusterer = null;
                        }
                        markers = [];
                    }
                    for (var i = 0; i < data_info.length; i++) {
                        mlevel = data_info[i].mlevel;
                        ptt = new BMap.Point(data_info[i].lng, data_info[i].lat);
                        if (mlevel == 'CBD')
                            marker = new BMap.Marker(ptt, { icon: icon4 });
                        else if (mlevel == 'YBQ')
                            marker = new BMap.Marker(ptt, { icon: icon3 });
                        else if (mlevel == 'XQH')
                            marker = new BMap.Marker(ptt, { icon: icon2 });
                        else
                            marker = new BMap.Marker(ptt, { icon: icon1 });

                        var content = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + data_info[i].mname + "</h4><img style='float:right;margin:4px' id='imgDemo' src='" + data_info[i].mpic + "' width='139' height='104' />" + data_info[i].madd + "<br\>";
                        map.addOverlay(marker);
                        
                        label = new BMap.Label(data_info[i].mname, { offset: new BMap.Size(20, -10) });
                        marker.setLabel(label);
                        markers.push(marker);
                        //addClickHandler(content, marker);
                    }
                    if (markers.length > 0)
                    markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers });//对地图扩大缩小后会都所有的点全显示出来。
                    if (scounty != "")
                        map.centerAndZoom(sprovince + scity+scounty, 13);
                    else if (scity != "")
                        map.centerAndZoom(sprovince + scity, 9);
                    else if (sprovince != "")
                        map.centerAndZoom(sprovince,6);
                    else
                        map.centerAndZoom("西安", 5);
                    
                },
                pagination: true, //是否开启分页
                pageList: [10, 20, 30, 40, 50],
                pageNumber: 1, //默认索引页
                pageSize: 20, //默认一页数据条数
                rownumbers: true //行号
            });
            $('#tt').datagrid('getPager').pagination({
                layout: ['list', 'prev', 'next', 'refresh']
            });


        }
        function getBoundary(city) {
            var bdary = new BMap.Boundary();
            bdary.get(city, function (rs) {       //获取行政区域

                var count = rs.boundaries.length; //行政区域的点有多少个
                if (count == 0) {
                    return;
                }
                var pointArray = [];
                for (var i = 0; i < count; i++) {
                    ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#22FF00", fillOpacity: 0, fillColor: "#FFEEEE" }); //建立多边形覆盖物
                    map.addOverlay(ply);  //添加覆盖物
                    pointArray = pointArray.concat(ply.getPath());
                }
                map.setViewport(pointArray);    //调整视野                 
            });
        }
        function addClickHandler(content, marker) {
            marker.addEventListener("click", function (e) {
                openInfo(content, e);

            }
            );
        }
        function openInfo(content, e) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            //var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象 
            var infoWindow = new BMap.InfoWindow(content);
            map.openInfoWindow(infoWindow, point); //开启信息窗口
            //document.getElementById('imgDemo').onload = function () {
            //    infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
            //}
        }
        function getQueryParams(queryParams) {
            if (sebm != "")
                queryParams.sebm = sebm;
            return queryParams;

        }
        //增加查询参数，重新加载表格  
        function reloadgrid() {

            //查询参数直接添加在queryParams中      
            var queryParams = $('#tt').datagrid('options').queryParams;
            getQueryParams(queryParams);
            $('#tt').datagrid('options').queryParams = queryParams;
            $("#tt").datagrid('reload');

        }
        //初始化搜索框
        function InitSearch() {
            $("#ipt_search").searchbox({
                width: 100,
                //iconCls: 'icon-save',
                searcher: function (val, name) {
                    $('#tt').datagrid('options').queryParams.search_type = name;
                    $('#tt').datagrid('options').queryParams.search_value = val;
                    $('#tt').datagrid('reload');
                },
                prompt: '请输入查询信息'
            });
            $('#DevType').combobox({
                data: devtype, width: 120, valueField: 'id', textField: 'text', editable: false, panelHeight: 'auto',
                onChange: function (n, o) {
                    if (n == "YBQ") {
                        $(".mych").show();
                        $("#showybq").show();
                    }
                    else {
                        $(".mych").hide();
                        $("#showybq").hide();
                    }
                    if (n == "XQH") {
                        $("#myxqh").show();
                        $('#XQHID').combobox({
                            data: weathertype, valueField: 'id', textField: 'text', panelHeight: 100, checkbox: true, width: 200, multiple: true

                        });
                    }
                    else {
                        $("#myxqh").hide();
                    }
                    if (n == "PICSB") {                        
                        $("#ybq").show();
                    }
                    else {                       
                        $("#ybq").hide();
                    }

                    if (n == "MQ_QJ") {
                        $("#mq_qj").show();
                    }
                    else {
                        $("#mq_qj").hide();
                    }
                }
            });
        }
        function newUser() {
            if (jd == "")
            {
                $.messager.alert("提示", "请选择设备标注点！", "info");
                return;
            }
            if (se == "") {
                $.messager.alert("提示", "请选择乡镇！", "info");
                return;
            }
            //清空内容  
            $('#fm').form('clear');
            $("#mjd").val(jd);
            $("#mwd").val(wd);
            $("#DevLocation").val(loc);
            $('#DevOwnerID').val(sebm);
            $('#myloc').text(se);
            $('#dlg').dialog('open').dialog('setTitle', '添加类别');
            $('#dlg').dialog('center');
            document.getElementById("test").value = "add";
        }

        function editUser() {

            var row = $('#tt').datagrid('getSelected');
            if (row == null) {
                $.messager.alert("提示", "请选择要修改的行！", "info");
            }
            if (row) {
                $('#dlg').dialog('open').dialog('setTitle', '修改类别');
                $('#dlg').dialog('center');
                document.getElementById("test").value = "modify";
                $('#fm').form('load', row);
                var n = row.DevType;
                if (n == "YBQ") {
                    $(".mych").show();
                    $("#showybq").show();
                }
                else {
                    $(".mych").hide();
                    $("#showybq").hide();
                }
                if (n == "XQH") {
                    $("#myxqh").show();
                    $('#XQHID').combobox({
                        data: weathertype, valueField: 'id', textField: 'text', panelHeight: 'auto', checkbox: true, width: 200, multiple: true

                    });
                }
                else {
                    $("#myxqh").hide();
                }

            }
        }
        //添加        
        function saveUser() {
            var test = document.getElementById("test").value;
            var f = $('#fm');
            if (test == "add") {
                f.form('submit', {
                    url: "GetDev.ashx?action=" + test,
                    onSubmit: function () {
                        return $(this).form('validate');
                    },
                    success: function (result) {
                        if (result.indexOf("T") == 0) {
                            $('#dlg').dialog('close');
                            $.messager.alert("提示", "恭喜您，信息添加成功", "info");
                            $('#tt').datagrid('reload');
                        }
                        else if ((result.indexOf("F") == 0)) {
                            $.messager.alert("提示", "添加失败，请重新操作！", "info");
                            return;
                        }
                        else if ((result.indexOf("L") == 0)) {
                            $.messager.alert("提示", "长时间没有操作，请重新登录！", "info");
                            top.location = '/index.aspx';
                            return;
                        }
                    }
                });

            } else {

                $('#fm').form('submit', {
                    url: "GetDev.ashx?action=" + test,
                    onSubmit: function () {
                        return $(this).form('validate');
                    },
                    success: function (result) {
                        if (result.indexOf("T") == 0) {
                            $('#dlg').dialog('close');
                            $('#tt').datagrid('clearSelections');
                            $.messager.alert("提示", "恭喜您，信息修改成功", "info");
                            $('#tt').datagrid('reload');

                        }
                        else if ((result.indexOf("F") == 0)) {
                            $.messager.alert("提示", "添加失败，请重新操作！", "info");
                            return;
                        }
                        else if ((result.indexOf("L") == 0)) {
                            $.messager.alert("提示", "长时间没有操作，请重新登录！", "info");
                            top.location = '/index.aspx';
                            return;
                        }
                    }
                });
            }
        }

        function removeUser() {
            var test = document.getElementById("test").value = "delete";
            var row = $('#tt').datagrid('getSelected');
            if (row == null) {
                $.messager.alert("提示", "请选择要删除的行！", "info");
            }
            if (row) {
                $.messager.confirm('提示', '你确定要删除这条信息吗？', function (r) {
                    if (r) {
                        $('#fm').form('submit', {
                            url: 'GetDev.ashx?KeyId=' + row.KeyId + "&action=" + test,
                            onSubmit: function () {
                                //return $(this).form('validate');  
                            },
                            success: function (result) {
                                if (result.indexOf("T") == 0) {
                                    $('#dlg').dialog('close');
                                    $('#tt').datagrid('clearSelections'); //清空选中的行  
                                    $.messager.alert("提示", "恭喜您，信息删除成功！", "info");
                                    $('#tt').datagrid('reload');
                                }
                                else if ((result.indexOf("F") == 0)) {
                                    $.messager.alert("提示", "添加失败，请重新操作！", "info");
                                    return;
                                }
                                else if ((result.indexOf("L") == 0)) {
                                    $.messager.alert("提示", "长时间没有操作，请重新登录！", "info");
                                    top.location = '/index.aspx';
                                    return;
                                }
                            }
                        });
                    }
                })
            }
        }

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="easyui-layout" style="width: 100%; height: 100%;">
        <div region="west" id="west" split="true" title="区域检索" style="width: 180px; overflow: scroll">
            <ul id="pt"></ul>
        </div>
        <div region="center" style="background: #eee; overflow: auto">
            <div class="easyui-layout" data-options="fit:true">
                <div region="west" split="true" style="width: 350px; overflow: auto">
                    <table id="tt">
                    </table>
                    <div id="tab_toolbar" style="padding: 4px;">
                        <table cellpadding="0" cellspacing="0" style="width: 100%">
                            <tr>
                                <td style="padding-left: 2px">
                                    <a href="#" onclick="newUser();" id="a_add"
                                        class="easyui-linkbutton" iconcls="icon-add">添加</a>
                                    <a href="javascript:void(0)" onclick="editUser() " class="easyui-linkbutton" data-options="iconCls:'icon-edit'">修改</a>
                                    <a href="#" onclick="removeUser();return false;" id="a_del" class="easyui-linkbutton" iconcls="icon-cancel">删除</a>

                                </td>
                                <td style="text-align: right; padding-right: 15px">
                                    <input id="ipt_search" menu="#search_menu" />
                                    <div id="search_menu" style="width: 120px">
                                        <div name="usernum">
                                            类型
                                        </div>
                                        <div name="username">
                                            名称
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="dlg" class="easyui-dialog" style="width: 400px; height: auto; padding: 10px 20px"
                        data-options="closed:true,buttons:'#dlg-buttons',shadow:false">

                        <form id="fm" method="post" enctype="multipart/form-data">
                            <div class="fitem">
                                <label>地区：</label>
                                <span id="myloc"></span>
                            </div>
                            <div class="fitem">
                                <label>类型：</label>
                                <input name="DevType" id="DevType" required="true" />
                                <input name="test" id="test" type="hidden" />
                                <input name="KeyId" id="KeyId" type="hidden" />
                                <input name="mjd" id="mjd" type="hidden" />
                                <input name="mwd" id="mwd" type="hidden" />
                                <input name="DevOwnerID" id="DevOwnerID" type="hidden"  />
                            </div>
                            <div class="fitem">
                                <label>设备ID：</label>
                                <input name="DevID" id="DevID" class="easyui-validatebox" data-options="required:true" />
                            </div>
                            <div class="fitem">
                                <label>设备名称：</label>
                                <input name="devname" id="devname" class="easyui-validatebox" data-options="required:true" />
                            </div>
                            <div class="fitem">
                                <label>设备管理人：</label>
                                <input name="DevOwnerName" id="DevOwnerName" class="easyui-validatebox" data-options="required:true" />
                            </div>
                            <div class="fitem">
                                <label>联系方式：</label>
                                <input name="DevContact" id="DevContact" class="easyui-validatebox" data-options="required:true" />
                            </div>
                            <div class="fitem">
                                <label>设备地址：</label>
                                <input name="DevLocation" id="DevLocation" class="easyui-validatebox" data-options="required:true" />
                            </div>
                            <div id="myxqh" class="fitem">
                                <label>气候参数：</label>
                                <input name="XQHID" id="XQHID" class="easyui-validatebox"  />
                            </div>
                            <div class="fitem">
                                <label>图片：</label>
                                <input id="File1" name="tpic" type="file" style="width: 150px;" />
                                <input id="mpic" name="mpic" type="hidden" />
                            </div>
                            <div class="mych">
                                <div class="fitem">
                                    <label>通道一：</label>
                                    <input name="chn0" id="chn0" class="easyui-validatebox" />
                                </div>
                                <div class="fitem">
                                    <label>通道二：</label>
                                    <input name="chn1" id="chn1" class="easyui-validatebox"  />
                                </div>
                                <div class="fitem">
                                    <label>通道三：</label>
                                    <input name="chn2" id="chn2" class="easyui-validatebox"  />
                                </div>
                                <div class="fitem">
                                    <label>通道四：</label>
                                    <input name="chn3" id="chn3" class="easyui-validatebox" />
                                </div>
                                
                            </div>
                            
                            <div id="mq_qj" name="mq_qj">
                                <div class="fitem">
                                    <label>经度：</label>
                                    <input name="yjd" id="yjd" class="easyui-validatebox" />
                                </div>
                                <div class="fitem">
                                    <label>纬度：</label>
                                    <input name="ywd" id="ywd" class="easyui-validatebox" />
                                </div>
                                <div class="fitem">
                                    <label>海拔：</label>
                                    <input name="yhb" id="yhb" class="easyui-validatebox" />
                                </div>
                                 <div class="fitem">
                                    <label>监控点编号：</label>
                                    <input name="mq_indexCode" id="mq_indexCode" class="easyui-validatebox" />
                                </div>
                                <div class="fitem">
                                    <label>平台IP：</label>
                                    <input name="mq_ip" id="mq_ip" class="easyui-validatebox" />
                                </div>
                                <div class="fitem">
                                    <label>平台Port</label>
                                    <input name="mq_port" id="mq_port" class="easyui-validatebox" />
                                </div>
                                <div class="fitem">
                                    <label>平台用户：</label>
                                    <input name="mq_username" id="mq_username" class="easyui-validatebox" />
                                </div>
                                <div class="fitem">
                                    <label>平台密码：</label>
                                    <input name="mq_password" id="mq_password" class="easyui-validatebox" />
                                </div>
                            </div>
                            <div class="fitem" style="height:80px;">
                                <label>备注：</label>
                                <textarea name="mmark" id="mmark" style="height:60px;width:200px;"></textarea><span id="showybq">小气候设备ID</span><span id="ybq">靶标设备ID</span>
                                
                            </div>
                            

                        </form>
                    </div>
                    <div id="dlg-buttons">
                        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="saveUser()">保存</a>
                        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript:$('#dlg').dialog('close')">关闭</a>
                    </div>
                </div>
                <div region="center" style="background: #eee; overflow: auto;">
                    <div id="mymap" style="width: 100%; height: 100%; overflow: hidden; margin: 0;"></div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>
